import React, { Fragment, memo, useEffect, useState } from 'react';
import { Breadcrumb, Card, Tag, Table } from 'antd';
import { Link } from 'react-router-dom';
import { getRights } from '../../api';

export default memo(function Users() {
  const [rightsTableData, setRightTable] = useState([])

  useEffect(() => {
    reqRightsList()
  }, [])
  const reqRightsList = async () => {
    const res = await getRights();
    if (res) {
      setRightTable(res)
    }
  }
  const columns = [{
    title: '权限名字',
    dataIndex: 'authName',
  },
  {
    title: '路径',
    dataIndex: 'path',
  },
  {
    title: '权限',
    key: 'id',
    render: (item) => {
      let str = '一级权限'
      if (item.level === 1) {
        str = '二级权限'
      } else if (item.level === 2) {
        str = '三级权限'
      }

      return <Tag color="blue" >
        {str}
      </Tag >

    }

  }

  ]



  return <Fragment>
    <Breadcrumb style={{ marginBottom: '10px' }} >
      <Breadcrumb.Item>
        <Link to='/'>
          首页
        </Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        用户管理
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        用户列表
      </Breadcrumb.Item>
    </Breadcrumb>
    <Card>

      <Table dataSource={rightsTableData} columns={columns} />
    </Card>
  </Fragment>
}
)